<template>
    <div class="card-container">
        <n-card
              hoverable
              title="认证学校"
        >
            <div class="card-content">
                <div
                      class="form"
                      v-show="isForm"
                >
                    <n-form
                          :model="schoolInfo"
                          :rules="rules"
                          ref="formRef"
                          label-placement="left"
                          label-align="left"
                          :label-width="100"
                          :show-require-mark="false"
                    >
                        <n-form-item
                              label="学校名称"
                              path="name"
                        >
                            <n-input
                                  v-model:value="schoolInfo.name"
                                  clearable
                            />
                        </n-form-item>
                        <n-form-item
                              label="学校账号"
                              path="userName"
                        >
                            <n-input
                                  v-model:value="schoolInfo.userName"
                                  clearable
                            />
                        </n-form-item>
                        <n-form-item
                              label="密码"
                              path="password"
                        >
                            <n-input
                                  v-model:value="schoolInfo.password"
                                  clearable
                            />
                        </n-form-item>
                        <n-form-item>
                            <n-button
                                  type="primary"
                                  @click="addSchool"
                            >
                                添加
                            </n-button>
                        </n-form-item>
                    </n-form>
                </div>
                <div
                      class="loading-container"
                      v-show="!isForm"
                >
                    <n-result
                          v-if="hasError"
                          status="error"
                          title="错误"
                    >
                        <template #footer>
                            <n-button
                                  type="primary"
                                  @click="isForm=true"
                            >
                                返回
                            </n-button>
                        </template>
                    </n-result>
                    <n-result
                          v-else
                          status="success"
                          title="成功"
                    >
                        <template #footer>
                            <n-button
                                  type="primary"
                                  @click="back"
                            >
                                返回
                            </n-button>
                        </template>
                    </n-result>
                </div>
            </div>
        </n-card>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useLoadingBar, useMessage } from 'naive-ui'
import api from '../../api'

export default defineComponent({
    name: 'AddSchool',
    setup() {
        const formRef = ref(null)
        const loadingBar = useLoadingBar()
        window.$message = useMessage()
        return {
            formRef,
            schoolInfo: ref({
                name: '',
                userName: '',
                password: ''
            }),
            rules: {
                name: [
                    {
                        required: true,
                        message: '请录入学校名称',
                        trigger: ['input', 'blur']
                    },
                    {
                        validator: (rule, value) => {
                            return /^[\u4e00-\u9fa5]{0,20}$/.test(value)
                        },
                        message: '请输入中文字符',
                        trigger: ['input', 'blur']
                    }
                ],
                userName: [
                    {
                        required: true,
                        message: '请录入学校账号',
                        trigger: ['input', 'blur']
                    },
                    {
                        validator: (rule, value) => {
                            return /^[0-9]{10}$/.test(value)
                        },
                        message: '请输入10位数字',
                        trigger: ['input', 'blur']
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请录入密码',
                        trigger: ['input', 'blur']
                    },
                    {
                        validator: (rule, value) => {
                            return /^[A-Za-z0-9]{8,16}$/.test(value)
                        },
                        message: '密码由8-16位字母、数字组成',
                        trigger: ['input', 'blur']
                    }
                ]
            },
            startLoading() {
                loadingBar.start()
            },
            finishLoading() {
                loadingBar.finish()
            },
            errorLoading() {
                loadingBar.error()
            }
        }
    },
    data() {
        return {
            isForm: true,
            hasError: false
        }
    },
    methods: {
        validForm() {
            return /^[\u4e00-\u9fa5]{0,20}$/.test(this.schoolInfo.name) && /^[0-9]{10}$/.test(this.schoolInfo.userName) && /^[A-Za-z0-9]{8,16}$/.test(this.schoolInfo.password)
            
        },
        async addSchool() {
            if(this.schoolInfo.name === '' || this.schoolInfo.userName === '' || this.schoolInfo.password === '') {
                window.$message.error('请填写完整信息！')
                return
            }
            if(!this.validForm()) {
                window.$message.error('请填写正确信息！')
                return
            }
            this.startLoading()
            await api.admin.addSchool(this.schoolInfo)
            setTimeout(() => {
                this.finishLoading()
                this.isForm = false
            }, 2000)
        },
        back() {
            this.isForm = true
            this.schoolInfo.name = ''
            this.schoolInfo.userName = ''
            this.schoolInfo.password = ''
        }
    }
})
</script>

<style scoped lang="less">
.card-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .n-card {
        margin-top: 5%;
        width: 80%;
        height: 50%;
    }
}
</style>

<style lang="less">
</style>